<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <form @submit="formSubmit" reportSubmit="true">
		            <view class="block">
		                <view class="user-money">账户剩余金额：{{data.price}}元</view>
		            </view>
		            <view class="flex-row block">
		                <view class="flex-grow-0 flex-y-center cash-cny">￥</view>
		                <view class="flex-grow-1 flex-y-center">
		                    <input class="cash-input" name="cash" placeholder="输入提现金额" placeholderStyle="color:#bbb;font-size:13pt" type="digit"></input>
		                </view>
		            </view>
		            <view class="block" style="background: none;border: none">
		                <view class="cash-min">可提现金额{{price>=1?'1~'+price:price}}元</view>
		            </view>
		            <view class="block">
		                <view class="pay-title">提现方式：默认
		                    <text v-if="data.__platform=='wx'">支付宝</text>
		                    <text v-else> 微信</text>打款</view>
		                <view class="withdraw_type">
		                    <block v-if="data.type_list.length>0">
		                        <view @click="select" class="tixian" :data-index="item.id" v-for="(item,index) in data.type_list" :key="index">
		                            <view class="pay flex-row " :class="[selected==item.id?'active':'']"> 
		                                <view class="flex-grow-0">
		                                    <image class="pay-img" :src="item.icon"></image>
		                                </view>
		                                <view class="flex-grow-0">{{item.name}}</view>
		                                <image class="selected" :src="data.__wxapp_img.share.selected.url" v-if="selected==item.id"></image>
		                            </view>
		                        </view>
		                    </block>
		                </view>
		            </view>
		            <block v-if="selected==1&&__platform=='wx'">
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">姓名</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="name"></input>
		                    </view>
		                </view>
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">账号</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="mobile" placeholder="请输入正确微信账号" placeholderStyle="color:#ccc;font-size:13pt" :value="mobile"></input>
		                    </view>
		                </view>
		            </block>
		            <block v-else-if="selected==2">
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">姓名</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="name"></input>
		                    </view>
		                </view>
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">账号</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="mobile" placeholder="请输入正确支付宝账号" placeholderStyle="color:#ccc;font-size:13pt" :value="mobile"></input>
		                    </view>
		                </view>
		            </block>
		            <block v-else-if="selected==3">
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">开户人</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="name"></input>
		                    </view>
		                </view>
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">开户行</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="bank_name" placeholder="请输入正确的银行名称" placeholderStyle="color:#ccc;font-size:13pt" :value="bank_name"></input>
		                    </view>
		                </view>
		                <view class="block flex-row" style="margin-top:20upx">
		                    <view class="flex-grow-0 flex-y-center required">账号</view>
		                    <view class="flex-grow-1 flex-y-center">
		                        <input class="cash-input" name="mobile" placeholder="请输入正确银行卡账号" placeholderStyle="color:#ccc;font-size:13pt" :value="mobile"></input>
		                    </view>
		                </view>
		            </block>
		            <view class="block" style="background: none;border: none;margin-top:68upx;">
		                <button class="cash-btn" formType="submit">提交申请</button>
		            </view>
		        </form>
		    </view>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
				    price: 0,
				    cash_max_day: -1,
				    selected: 0
				},
			};
		},
		 onLoad: function(e) {myVue = this;
		    myVue.getApp.page.onLoad(this, e);
		},
		onReady: function() {
		    myVue.getApp.page.onReady(this);
		},
		onShow: function() {
		    myVue.getApp.page.onShow(this);
		    var a = this;
		    a.getApp.core.showLoading({
		        title: "正在提交",
		        mask: !0
		    }), a.getApp.request({
		        url: a.getApp.api.store.user.cash_preview,
		        success: function(e) {
		            if (0 == e.code) {
		                var t = {};
		                t.price = e.data.money, t.type_list = e.data.type_list, a.setData(t);
		            }
		        },
		        complete: function(e) {
		            a.getApp.core.hideLoading();
		        }
		    });
		},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		methods:{
			 showCashMaxDetail: function() {
			    myVue.getApp.core.showModal({
			        title: "提示",
			        content: "今日剩余提现金额=平台每日可提现金额-今日所有用户提现金额"
			    });
			},
			select: function(e) {
			    var t = e.currentTarget.dataset.index;
			    t != this.data.check && this.setData({
			        name: "",
			        mobile: "",
			        bank_name: ""
			    }), this.setData({
			        selected: t
			    });
			},
			formSubmit: function(e) {
			    var t = this, a = parseFloat(parseFloat(e.detail.value.cash).toFixed(2)), i = t.data.price;
			    if (a) if (i < a) t.getApp.core.showToast({
			        title: "提现金额不能超过" + i + "元",
			        image: "/static/images/icon-warning.png"
			    }); else if (a < 1) t.getApp.core.showToast({
			        title: "提现金额不能低于1元",
			        image: "/static/images/icon-warning.png"
			    }); else {
			        var o = t.data.selected;
			        if (0 == o || 1 == o || 2 == o || 3 == o || 4 == o) {
			            if ("my" == t.data.__platform && 0 == o && (o = 2), 1 == o || 2 == o || 3 == o) {
			                if (!(c = e.detail.value.name) || null == c) return void t.getApp.core.showToast({
			                    title: "姓名不能为空",
			                    image: "/static/images/icon-warning.png"
			                });
			                if (!(s = e.detail.value.mobile) || null == s) return void t.getApp.core.showToast({
			                    title: "账号不能为空",
			                    image: "/static/images/icon-warning.png"
			                });
			            }
			            if (3 == o) {
			                if (!(n = e.detail.value.bank_name) || null == n) return void t.getApp.core.showToast({
			                    title: "开户行不能为空",
			                    image: "/static/images/icon-warning.png"
			                });
			            } else var n = "";
			            if (4 == o || 0 == o) {
			                n = "";
			                var s = "", c = "";
			            }
			            t.getApp.core.showLoading({
			                title: "正在提交",
			                mask: !0
			            }), t.getApp.request({
			                url: t.getApp.api.store.user.cash,
			                method: "POST",
			                data: {
			                    cash_val: a,
			                    nickname: c,
			                    account: s,
			                    bank_name: n,
			                    type: o,
			                    scene: "CASH",
			                    form_id: e.detail.formId
			                },
			                success: function(t) {
			                    t.getApp.core.hideLoading(), t.getApp.core.showModal({
			                        title: "提示",
			                        content: t.msg,
			                        showCancel: !1,
			                        success: function(e) {
			                            e.confirm && 0 == t.code && t.getApp.core.redirectTo({
			                                url: "/store/m/cash-log/cash-log"
			                            });
			                        }
			                    });
			                }
			            });
			        } else t.getApp.core.showToast({
			            title: "请选择提现方式",
			            image: "/static/images/icon-warning.png"
			        });
			    } else t.getApp.core.showToast({
			        title: "请输入提现金额",
			        image: "/static/images/icon-warning.png"
			    });
			}
		}
	}
</script>

<style scoped>
form {
    border-top: 1upx solid #eee;
    display: block;
    padding-bottom: 32upx;
}

.block {
    border-bottom: 1upx solid #e3e3e3;
    background: #fff;
    padding: 32upx 24upx;
}

.user-money {
    font-size: 15pt;
}

.cash-max-day {
    font-size: 9pt;
    margin-top: 18upx;
    color: #888;
}

.cash-cny {
    font-size: 19pt;
    color: #ff4544;
    line-height: 1.7;
}

.cash-input {
    height: 100%;
    width: 100%;
    padding: 0 32upx;
}

.cash-min {
    font-size: 9pt;
}

.cash-btn {
    width: 100%;
    height: 100upx;
    background-color: #ff4544;
    color: #fff;
    text-align: center;
    font-size: 13pt;
    line-height: 100upx;
}

.cash-max-detail {
    border: 1upx solid #bbb;
    padding: 4upx 8upx;
    border-radius: 5upx;
    margin-left: 24upx;
}

.pay-title {
    font-size: 13pt;
    color: #353535;
    margin-bottom: 30upx;
}

.pay {
    border: 1upx #666 solid;
    padding: 16upx 32upx;
    position: relative;
}

.pay-img {
    width: 40upx;
    height: 40upx;
    margin-right: 16upx;
}

.active {
    border: 2upx #ff4544 solid;
}

.selected {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32upx;
    height: 32upx;
}

.required::after {
    content: '*';
    vertical-align: top;
    color: #ff4544;
}

.tixian {
    width: 200upx;
    display: inline-block;
    margin-left: 32upx;
    margin-top: 10upx;
}
</style>
